<!DOCTYPE HTML >
<html>
  <head>
	  <meta charset="UTF-8">
	  <meta http-equiv="X-UA-Compatible" content="edge" />
	  <title>聊天室</title>
	  <script src="./js/jquery-1.12.3.min.js"></script>
	  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	  <script src="./WebIMConfig.js"></script>
	  <script src="webimSDK3.0.4.js"></script>
	  <script src="EMedia_x1v1.js"></script>
<style>
body{
	margin-top:5px;
}
</style>
</head>
  <body>
    <div class="container">
    	<div class="row">
    		<div class="col-md-3">
    		<div class="panel panel-primary">
				  <div class="panel-heading">
				    <h3 class="panel-title">当前登录用户</h3>
				  </div>
				  <div class="panel-body">
					  <div class="panel-body">
						  <input type="text" class="form-control"  id="userId" placeholder="用户ID" /><br>
						  <button id="register" type="button" class="btn btn-primary">注册</button>
						  <button id="login" type="button" class="btn btn-primary">登录</button>
					  </div>
					  <div class="panel-body">
						  <input type="text" class="form-control"  id="toUserId" placeholder="接收用户ID" />
					  </div>
				  </div>
				</div>
    			<div class="panel panel-primary" id="online">
				  <div class="panel-heading">
				    <h3 class="panel-title">当前在线的其他用户</h3>
				  </div>
				  <div class="panel-body">
				    <div class="list-group" id="users">
					</div>
				  </div>
				</div>
				<div class="panel panel-primary">
				  <div class="panel-heading">
				    <h3 class="panel-title">群发系统广播</h3>
				  </div>
				  <div class="panel-body">
				    <input type="text" class="form-control"  id="msg" /><br>
				    <button id="broadcast" type="button" class="btn btn-primary">发送</button>
				  </div>
				</div>
    		</div>
  			<div class="col-md-9">
  				<div class="panel panel-primary">
				  <div class="panel-heading">
				    <h3 class="panel-title" id="talktitle"></h3>
				  </div>
				  <div class="panel-body">
				    <div class="well" id="log-container" style="height:400px;overflow-y:scroll">
				    
				    </div>
				    	<input type="text" id="myinfo" class="form-control col-md-12" /> <br>
				    	<button id="send" type="button" class="btn btn-primary">发送</button>
				    </div>
				</div>
  			</div>
    	</div>
    </div> 
<script>
	//建立连接
	var conn = {};
	console.log(WebIM, window.WebIM);
	WebIM.config = config;
	conn = WebIM.conn = new WebIM.default.connection({
		appKey: WebIM.config.appkey,
		isHttpDNS: WebIM.config.isHttpDNS,
		isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
		host: WebIM.config.Host,
		https: WebIM.config.https,
		url: WebIM.config.xmppURL,
		apiUrl: WebIM.config.apiURL,
		isAutoLogin: false,
		heartBeatWait: WebIM.config.heartBeatWait,
		autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
		autoReconnectInterval: WebIM.config.autoReconnectInterval,
		isStropheLog: WebIM.config.isStropheLog,
		delivery: WebIM.config.delivery
	})

	conn.listen({
		onOpened: function (message) {          //连接成功回调
			var myDate = new Date().toLocaleString();
			console.log("%c [opened] 连接已成功建立", "color: green");
			console.log(myDate);
			// rek();
			// alert(myDate + "登陆成功")
		},
		onClosed: function (message) {
			console.log("onclose:" + message);
			console.log(error);
		},         //连接关闭回调
		onTextMessage: function (message) {
			console.log('onTextMessage: ', message);
			$("#log-container").append("<div class='bg-success'><label class='text-info'>接收用户的ID："+message.to+"，接收的内容是：</label><div class='text-info'>"+message.data+"</div></div><br>");
		}    //收到文本消息
	})


	var userId;
	var password;
	var nickName;
	//注册
	document.getElementById('register').onclick = function () {
	    userId = document.getElementById("userId").value;
	    //设置ajax为同步
		$.ajaxSettings.async = false;
	    $.get("/user/"+userId,function(data){
			userId = data.data.id
			nickName = data.data.nickname;
			password = data.data.password;
		})

	    var option = {
	        username: userId,
			nickname: nickName,
	        password: password,
	        appKey: WebIM.config.appkey,
	        success: function () {
	            console.log('注册成功');
	        },
	        error: function () {
	            console.log('注册失败');
	        },
	        apiUrl: WebIM.config.apiURL
	    };
	    conn.signup(option);
	};

	//登录
	document.getElementById('login').onclick = function () {
		console.log(WebIM, window.WebIM);
		userId = document.getElementById("userId").value;
		//设置ajax为同步
		$.ajaxSettings.async = false;
		$.get("/user/"+userId,function(data){
			userId = data.data.id
			nickName = data.data.nickname;
			password = data.data.password;
		})
		options = {
			apiUrl: WebIM.config.apiURL,
			user: userId,
			pwd: password,
			appKey: WebIM.config.appkey
		};
		conn.open(options);
		console.log(options)
	};

	//文本消息
	var conf = WebIM.config
	//var WebIM = WebIM.default
	WebIM.config = conf
	WebIM.message = WebIM.default.message
	WebIM.utils = WebIM.default.utils
	WebIM.debug = WebIM.default.debug
	WebIM.statusCode = WebIM.default.statusCode

	var myDate = new Date().toLocaleString();
	document.getElementById('send').onclick = function () {
		var tname = document.getElementById("toUserId").value;
		var tmsg = document.getElementById("myinfo").value;
		var id = conn.getUniqueId();                 // 生成本地消息id
		var msg = new WebIM.default.message('txt', id);      // 创建文本消息
		msg.set({
			msg: tmsg,                  // 消息内容
			to: tname,
			ext: {
				'time': myDate
			},                       // 接收消息对象（用户id）
			success: function (id, serverMsgId) {
				console.log('send private text Success');
				msgText = msg.body.msg;
			},
			fail: function (e) {
				console.log("Send private text error");
			}
		});
		msg.body.chatType = 'singleChat';
		conn.send(msg.body);
		$("#log-container").append("<div class='bg-success'><label class='text-info'>发送用户的ID是："+userId+"，内容为：</label><div class='text-info'>"+tmsg+"</div></div><br>");
		console.log(msg);

	};
</script>    
    
  </body>
</html>
